<template>
  <div class="wheel-wrap">
    <div class="wheel-con">
      <div class="rule-box">
        <div class="number">今天剩余抽奖：{{lottery_ticket}}次</div>
        <div class="rule" @click="open">规则说明</div>
      </div>
      <div class="title-box"><img src="./title.png" class="pic1" onclick="return false"/></div>

      <div class="wheel-main">
        <div class="wheel-pointer-box">
          <div class="wheel-pointer" @click="rotate_handle()"
               :style="{transform:rotate_angle_pointer,transition:rotate_transition_pointer}"></div>
        </div>
        <div class="wheel-bg">
          <div class="wheel-box" :style="{transform:rotate_angle,transition:rotate_transition}">
            <div class="prize-list">
              <div class="prize-item" v-for="(item,index) in prize_list" :key="index">
                <div class="prize-con">
                  {{item.prizeName}}
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="draw-box">
        <div class="decoration-box">
          <img src="./decoration.png" class="decoration" onclick="return false"/>
        </div>

        <div class="title-con">
          <span class="title" :class="{'active':type == 1,'quiet':this.type == 2}"
                @click="selectAll(1)">中奖名单</span><span class="title"
                                                       :class="{'quiet':this.type == 1,'active':type == 2}"
                                                       @click="selectMine(2)">我的奖品</span>
        </div>


        <div class="list-box" v-if="showData == 1" ref="wrapper">

          <div v-if="type == 1">
            <div class="list-con" v-for="(item,index) in prize_rankList" :key="index">
              <span>{{item.userName}}</span><span>{{item.prizeName}}</span>
            </div>
          </div>

          <div v-else-if="type == 2">
            <div class="list-con" v-for="(item,index) in prize_rankList" :key="index">
              <span>{{item.prizeName}}</span><span>{{item.time | format}}</span>
            </div>
          </div>
        </div>


        <div class="empty-prize" v-if="showData == 2">
          <div class="no-prize">您还没有奖品哦！赶紧去抽奖吧！</div>
        </div>
      </div>
    </div>


    <!--规则说明-->
    <div class="modal-wrap" v-show="modal">
      <div class="modal-box">
        <div class="modal-con">
          <div class="title-box">
            <span class="title">规则说明</span>
            <img src="./del.png" class="del-icon" @click="close" onclick="return false"/>
          </div>
          <div class="rule-box">
            1.任意一个蓝聘用户都可以参与本活动，所有奖品都有机会获取，每次抽奖需消耗用户20积分，每人每天最多进行三次抽奖。
          </div>
          <div class="rule-box">
            2.抽中的奖品若不是实物，则由系统直接发放;若是实物，则由工作人员邮寄给您。
          </div>
          <div class="rule-box">
            3.凡是通过非正常手段获取积分或者进行积分抽奖的行为，一经查证，我们将不再对其提供相应服务。
          </div>
        </div>
      </div>
    </div>

    <v-dialog v-model="toast_control" :content="toast_title" type="default" @sure="confirm"></v-dialog>

  </div>

</template>

<script>
  import dialog from "../../../components/dialog"
  import {baseUrl} from "../../../config/env"
  import {getUrlKey, formatDate, getDeviceRatio} from "../../../config/util"
  import BScroll from 'better-scroll'
  /*获取当前缩放比*/
  const DEVICE_RATIO = getDeviceRatio();
  /**
   *
   * @param threshold 触发事件的阀值，即滑动多少距离触发
   */
  /*上拉配置*/
  const UP_CONFIG = {
    threshold: -80 * DEVICE_RATIO,
  };

  export default {
    data() {
      return {
        modal: false,
        lottery_ticket: 0, //抽奖次数
        toast_title: "",//提示语
        toast_control: false, //抽奖结果弹出框控制器
        start_rotating_degree: 0, //初始旋转角度
        rotate_angle: 0, //将要旋转的角度
        start_rotating_degree_pointer: 0, //指针初始旋转角度
        rotate_angle_pointer: 0, //指针将要旋转的度数
        rotate_transition: "transform 6s ease-in-out", //初始化选中的过度属性控制
        rotate_transition_pointer: "transform 12s ease-in-out", //初始化指针过度属性控制
        click_flag: true, //是否可以旋转抽奖
        prize_list: [], //奖品列表
        index: "",//指定每次旋转到的奖品下标
        userSign: "",
        prize_rankList: [],
        showData: 0,
        type: 1,
        wheelScroll: null,
        currentPage: 1,
        PageSize: 50,
        noMoreData: false,
      }
    },
    created() {
      this.userSign = getUrlKey("id");
      this.init_prize_list();
      this.queryPrizeRank();
    },
    methods: {
      init_prize_list() {//初始化奖品
        this.$vux.loading.show({
          text: '加载中',
        });
        this.axios.get(baseUrl + "/prize/get_prize_list?sgin=" + this.userSign).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data != null) {
            this.prize_list = resultObj.data;
            if (this.prize_list.length > 0) {
              this.lottery_ticket = this.prize_list[0].reNum;
            }

          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      queryPrizeRank(callback) {//查询中奖名单
        this.axios.get(baseUrl + "/prize/get_prize_record_list?sgin=" + this.userSign + "&type=" + this.type + "&page=" + this.currentPage + "&size=" + this.PageSize).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0 && resultObj.data != null) {
            this.prize_rankList = [];
            if (resultObj.data.length > 0) {
              this.showData = 1;
              this.prize_rankList = resultObj.data;
              if (callback) {
                callback();
              }
              //DOM还没有更新
              this.$nextTick(() => {
                this.initScroll();
                this.wheelScroll.on('touchEnd', (pos) => {
                  if (Math.abs(Math.round(pos.y)) > Math.abs(Math.round(this.wheelScroll.maxScrollY + 1))) {
                    this.loadMore();
                  }
                });
              });
            } else {
              this.showData = 2;
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      rotate_handle() {
        this.rotating();//这个函数是转动函数，需要传入奖品对应下标，如果没有传入,则随机
      },
      rotating() {//转动转盘
        if (!this.click_flag) return;
        if (this.lottery_ticket == 0) {//次数用完
          this.game_finish();
          return;
        }
        //抽奖
        let data = {};
        this.axios.post(baseUrl + "/prize/add_prize_record?sgin=" + this.userSign, data).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data != null) {
            let type = 0; //默认为0转盘转动,1箭头和转盘都转动
            let during_time = 3; //默认为3s
            this.index = resultObj.data.id; //最终要旋转到哪一块，对应prize_list的下标
            let result_angle = [360, 315, 270, 225, 180, 135, 90, 45]; //最终会旋转到下标的位置所需要的度数
            let rand_circle = 8; //附加多转几圈，2-3
            this.click_flag = false; //旋转结束前，不允许再次触发
            this.lottery_ticket = this.lottery_ticket - 1;
            if (type == 0) {//转动盘子
              for (let i = 0; i < this.prize_list.length; i++) {
                if (this.prize_list[i].id == this.index) {
                  this.index = i;
                }
              }
              let rotate_angle = this.start_rotating_degree + rand_circle * 360 + result_angle[this.index] - this.start_rotating_degree % 360;
              this.start_rotating_degree = rotate_angle;
              this.rotate_angle = "rotate(" + rotate_angle + "deg)";
              // 旋转结束后，允许再次触发
              setTimeout(() => {
                this.game_over();
                this.click_flag = true;
              }, during_time * 1000 + 1500); // 延时，保证转盘转完
            }
          } else {
            if (resultObj.code == 20070) {//次数用完
              this.game_finish();
            } else {
              this.$vux.toast.text(resultObj.msg, "middle");
            }
          }
        }).catch((error) => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      game_over() {//抽奖结果
        setTimeout(() => {
          this.toast_control = true;
          let type = this.prize_list[this.index].prizeName;
          if (type == "谢谢参与") {
            this.toast_title = "很遗憾没有中奖~ ，不要灰心哦，再接再厉！";
          } else if (type.indexOf("积分") != -1) {
            this.toast_title = `恭喜您获得${this.prize_list[this.index].prizeName}`;
          } else if (type.indexOf("红包") != -1) {
            this.toast_title = `恭喜您获得${this.prize_list[this.index].prizeName}，我们将在24小时内发放到您的蓝聘账户上，请注意查收！`;
          }
        }, 1500);
      },
      game_finish() {//次数用完
        this.toast_control = true;
        this.toast_title = "今天抽奖次数已用完，明天再来试试吧~";
      },
      close() {
        this.modal = false;
      },
      open() {
        this.modal = true;
      },
      confirm() {
        this.toast_control = false;
      },
      selectAll() {
        this.type = 1;
        this.currentPage = 1;
        this.PageSize = 50;
        window.scrollTo(0, 0);
        this.queryPrizeRank(() => {
          //初始化Dom
          this.$nextTick(() => {
            this.wheelScroll = null;
            this.showLoading = false;
            this.noMoreData = false;
            this.initScroll();
          });
        });
      },
      selectMine() {
        this.type = 2;
        this.currentPage = 1;
        this.PageSize = 50;
        window.scrollTo(0, 0);
        this.queryPrizeRank(() => {
          //初始化Dom
          this.$nextTick(() => {
            this.wheelScroll = null;
            this.showLoading = false;
            this.noMoreData = false;
            this.initScroll();
          });
        });
      },
      loadMore() {//加载更多
        if (!this.noMoreData) {
          this.$vux.loading.show({
            text: '加载中',
          });
          setTimeout(() => {
            this.axios.get(baseUrl + "/prize/get_prize_record_list?sgin=" + this.userSign + "&type=" + this.type + "&page=" + (++this.currentPage) + "&size=" + this.PageSize).then((res) => {
              let resultObj = res.data;
              if (resultObj.code == 0) {
                if (resultObj.data.length > 0) {
                  this.prize_rankList = this.prize_rankList.concat(resultObj.data);
                } else {
                  this.noMoreData = true;
                }
                this.$vux.loading.hide();
              } else {
                this.$vux.loading.hide();
                this.$vux.toast.text(resultObj.msg, "middle");
              }
            })
          }, 500)
        }
      },
      initScroll() {//初始化BScroll
        if (!this.wheelScroll) {
          this.wheelScroll = new BScroll(this.$refs.wrapper, {
            probeType: 3,
            deceleration: 0.003,
            bounce: false,
            swipeTime: 2000,
            click: true,
            pullUpLoad: UP_CONFIG
          });
        } else {
          this.wheelScroll.refresh();
        }
      },
      enable() {
        this.wheelScroll && this.wheelScroll.enable()
      },
      refresh() {
        this.wheelScroll && this.wheelScroll.refresh()
      },
      finishPullUp() {
        this.wheelScroll && this.wheelScroll.finishPullUp()
      }
    },
    filters: {
      format(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd');
      }
    },
    watch: {
      prize_rankList() {
        this.$nextTick(() => {
          this.wheelScroll.refresh();
        })
      }
    },
    components: {
      BScroll,
      "v-dialog": dialog
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"

  .wheel-wrap
    wh(100%, 100%)
    bg-image("./bg.png", 100%, 100%)
    overflow: hidden
    .wheel-con
      wh(100%, auto)
      overflow: hidden
      .rule-box
        fj(center, center)
        margin-top: 0.32rem
        margin-bottom: 0.32rem
        wh(100%, auto)
        .number
          margin-left: 0.32rem
          text-align: center
          wh(3.2rem, 0.6rem)
          line-height: 0.6rem
          background: rgba(119, 48, 37, 0.14)
          border-radius(0.307rem)
          size-color(0.32rem, rgba(255, 255, 255, 1))
        .rule
          text-align: center
          margin-left: auto
          wh(2.133rem, 0.773rem)
          line-height: 0.773rem
          background: rgba(255, 252, 224, 0.2)
          border-top-left-radius: 0.387rem
          border-bottom-left-radius: 0.387rem
          size-color(0.4rem, rgba(255, 255, 255, 1))
      .title-box
        display: flex
        justify-content: center
        margin-bottom: 0.227rem
        .pic1
          wh(6.427rem, 1.24rem)
      .wheel-main
        fj(center, center)
        position: relative
        box-sizing: border-box
        margin-bottom: 0.48rem
        .wheel-pointer-box
          position: absolute
          z-index: 1
          wh(2.64rem, 2.64rem)
          fj(center, center)
          left: 0
          right: 0
          bottom: 0
          top: 0
          margin: auto
          .wheel-pointer
            wh(2.64rem, 2.64rem)
            bg-image("./btn.png", 100%, 100%)
            transform-origin: center 60%
        .wheel-bg
          fj(center, center)
          wh(7.227rem, 7.227rem)
          bg-image("./table_bg.png", 100%, 100%)
          .wheel-box
            display: flex
            flex-direction: column
            justify-content: center
            align-content: center
            wh(5.733rem, 5.733rem)
            bg-image("./word_bg.png", 100%, 100%)
            transition: transform 3s ease
            div
              text-align: center
            .prize-list
              position: relative
              wh(100%, 100%)
              .prize-item
                position: absolute
                top: 0
                left: 0
                wh(1.95rem, 2.867rem)
                &:first-child
                  top: 0.13rem
                  left: 2.44rem
                  transform: rotate(22deg)
                  size-color(0.307rem, rgba(158, 72, 9, 1))
                &:nth-child(2)
                  top: 0.95rem
                  left: 3.22rem
                  transform: rotate(67deg)
                  size-color(0.307rem, rgba(255, 242, 174, 1))
                  font-weight: bold
                &:nth-child(3)
                  top: 2.08rem
                  left: 3.18rem
                  transform: rotate(-248deg)
                  size-color(0.307rem, rgba(158, 72, 9, 1))
                &:nth-child(4)
                  top: 2.77rem
                  left: 2.42rem
                  transform: rotate(-201deg)
                  size-color(0.307rem, rgba(255, 242, 174, 1))
                &:nth-child(5)
                  top: 2.77rem
                  left: 1.32rem
                  transform: rotate(-160deg)
                  size-color(0.307rem, rgba(158, 72, 9, 1))
                &:nth-child(6)
                  top: 2.05rem
                  left: 0.63rem
                  transform: rotate(-111deg)
                  size-color(0.307rem, rgba(255, 242, 174, 1))
                &:nth-child(7)
                  top: 0.92rem
                  left: 0.58rem
                  transform: rotate(-70deg)
                  size-color(0.307rem, rgba(158, 72, 9, 1))
                &:nth-child(8)
                  top: 0.15rem
                  left: 1.3rem
                  transform: rotate(-22deg)
                  size-color(0.307rem, rgba(255, 242, 174, 1))
                .prize-con
                  margin-top: 0.45rem
      .draw-box
        position: absolute
        left: 0
        right: 0
        bottom: 0.373rem
        margin: auto
        wh(92.53%, 4.267rem)
        background: rgba(255, 255, 255, 0.2)
        border-radius: 0.16rem
        .title-con
          display: flex
          align-items: center
          wh(100%, 1.067rem)
          .title
            flex: 1
            text-align: center
            line-height: 1.067rem
            height: 1.067rem
            font-weight: 500
          .active
            border-top-left-radius: 0.107rem
            size-color(0.453rem, rgba(255, 92, 0, 1))
            background: rgba(255, 242, 174, 1)
          .quiet
            border-top-right-radius: 0.107rem
            size-color(0.453rem, rgba(254, 255, 255, 1))
            border-bottom: 0.027rem solid rgba(228, 68, 41, 1)
        .list-box
          wh(100%, 3.2rem)
          overflow: hidden
          .list-con
            fj(space-around, center)
            wh(100%, 0.8rem)
            span
              flex: 1
              fj(center, center)
              height: 100%
              size-color(0.347rem, rgba(255, 226, 179, 1))
              font-weight: 500
              ellipsis()
        .empty-prize
          fj(center, center)
          wh(100%, 3.2rem)
          .no-prize
            size-color(0.347rem, rgba(254, 225, 178, 1))
            font-weight: 500
        .decoration-box
          position: absolute
          left: 0
          right: 0
          top: -1.48rem
          margin: auto
          wh(90.8%, 1.48rem)
          .decoration
            wh(100%, 100%)
    .modal-box
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 100
      background-color: rgba(0, 0, 0, 0.5)
      .modal-con
        position: absolute
        width: 100%
        height: 9.186666rem
        bottom: 0
        background: #FFF
        .title-box
          display: flex
          align-items: center
          width: 100%
          height: 1.333333rem
          border-bottom: 1px solid rgba(204, 204, 204, 1)
          .title
            display: flex
            justify-content: center
            width: 100%
            font-size: 0.44rem
            font-weight: 500
            color: rgba(27, 27, 27, 1)
          .del-icon
            position: absolute;
            width: 0.386666rem;
            height: 0.386666rem;
            right: 0.373333rem;
        .rule-box
          width: 92.53%
          height: auto
          margin: 0 auto
          margin-top: 0.373333rem
          font-size: 0.413333rem
          color: rgba(68, 68, 68, 1)
          line-height: 0.626666rem
          margin-bottom: 0.48rem
</style>
